<template>
    <div class="alarmLineChart">
        <div ref="alarmLineChart" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    name: "alarmLineChart",
    components: {},
    data() {
        return {
            myChart: null,
            lineData: {
                legendName:[],
                type1: [],
                type2: [],
                type3: [],
                type4: [],
                xaxisData: [],
            }
        };
    },
    props: {},
    computed: {},
    methods: {
        echartsInit() {
            this.myChart = echarts.init(this.$refs.alarmLineChart);
            var color = ["#61B5FF", "#FFCC01", "#FF9502", "#FF3A30"]
            //配置信息
            var option = {
                color: color,
                title: {
                    text: '单位：条',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.lineData.legendName,
                    itemWidth: 16,   // 设置图例标记的图形宽度
                    itemHeight: 18,  // 设置图例标记的图形高度
                    right: '3%',
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    top: '12%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.lineData.xaxisData,
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(108, 128, 151, 0.3)', // 这里设置你想要的颜色
                            type: 'dashed' // 设置虚线类型
                        }
                    }
                },
                series: [
                    {
                        name: this.lineData.legendName[0],
                        type: 'line',
                        smooth: true,
                        data: this.lineData.type1
                    },
                    {
                        name: this.lineData.legendName[1],
                        type: 'line',
                        smooth: true,
                        data: this.lineData.type2
                    },
                    {
                        name: this.lineData.legendName[2],
                        type: 'line',
                        smooth: true,
                        data: this.lineData.type3
                    },
                    {
                        name: this.lineData.legendName[3],
                        type: 'line',
                        smooth: true,
                        data: this.lineData.type4
                    }
                ]
            };
            this.myChart.setOption(option);
            this.myChart.resize();
        },
    },
    created() { },
    mounted() { },
    beforeDestroy() { },
};
</script>

<style lang="less" scoped>
.alarmLineChart {
    width: 100%;
    height: 100%;
    padding: 10px;
}
</style>